<template>
    <div>
        <div id="yj">
        <van-dropdown-menu>
        <van-dropdown-item
            v-model="value1"
            :options="area"
            @change="charea()" />
        <van-dropdown-item
            v-model="value2"
            :options="yh"
            @change="chyh()" />
        </van-dropdown-menu>
    </div>
    <ul v-if="flag">
        <li v-for="(item,index) in showyj" :key="index">
            {{item.city}} : {{item.yj}}
        </li>
    </ul>
    <ul v-else>
        <li v-for="(value,name) in showyj" :key="name">
            {{name}} : {{value}}
        </li>
    </ul>
    </div>
</template>

<script>

export default {
  data () {
    return {
      value1: 0,
      value2: '92h',
      area: [],
      yh: [
        { text: '92h', value: '92h' },
        { text: '95h', value: '95h' },
        { text: '98h', value: '98h' },
        { text: '0h', value: '0h' }
      ],
      yjlist: [],
      showyj: {},
      showyj: [],
      flag: false
    }
  },
  craeted () {
    this.axios.get('/api1?key=06a11341efedc951f10a74731f69c77f').then(res => {
      this.yjlist = res.data.result
      var item = { text: '', value: '' }
      for (var i = 0; i < this.yjlist.length; i++) {
        item.text = this.yjlist[i].city
        item.value = i
        this.area.push(item)
        item = { text: '', value: '' }
      }
      this.showyj = this.yjlist[0]
    })
  },
  methods: {
    charea () {
      this.showyj = this.yjlist[this.value]
      this.flag = false
    },
    chyh () {
      var item = { city: '', yj: '' }
      for (var i = 0; i < this.yjlist.length; i++) {
        item.city = this.yjlist[i].city
        item.yj = this.yjlist[i][this.value2]
        this.showyh.push(item)
        item = { city: '', yj: '' }
        this.flag = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
li{
    line-height: 28px;
    font-size: 16px;
}
li:nth-of-type(2n){
    background-color: darkseagreen;
}
</style>
